<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Http</title>
    <link rel="stylesheet" href="">
</head>
<style>
    @import './data/style.css';
</style>
<body>
    <button id="link">按钮</button>
    <div class="box">盒子</div>
    <script>
        // 客户端和服务器端交互及性能优化
        // request 请求阶段
            // 1.url地址解析
            // 2.dns服务器 => DNS域名解析 => 服务器发送请求(建立连接)
            // 3.和服务器建立TCP连接
            // 4.把客户端资源传递给服务器(发送http请求)
            // 5.服务器收到并处理请求(http响应内容)
        // Response 响应阶段
            // 6.客户端渲染页面
            // 7.断开TCP连接
        // 过程 url地址解析 => dns解析 => 发送请求 => 建立TCP连接 => 发送请求资源 => 返回资源() => 断开TCP连接

        // @1 url地址解析 URI/URL/URN 
            // URI  Uniform Resource Identifier 统一资源标识符：URL URN 都属于URI
            // URL: Uniform Resource Locator 统一资源定位符：根据地址能找到对应的资源
            // URN: Uniform Resource Name 统一资源名称 一般指国际通用标准的名字

        // 一个完整的url所包含的内容
            // http://www.baidu.com:80/login/index.html?name=lzw&age=18#zs
        /*
        * 协议 http     传输协议 客户端服务端 通讯信息传输的工具 类似快递小哥
            *  http 超文本传输协议，除了传递文本还可以传递媒体资源文件 或者流文件 以及XML格式数据
            *  https  更加安全的http，一般涉及支付的网站都支持https协议 s代表SSL 加密证书
            *  ftp  文件传输协议 传输大型文件
        * 域名 www.baidu.com
            *  顶级域名 qq.com 
            *  一级域名 www.qq.com
            *  二级域名 sports.qq.com
            *  三级域名 kbs.sports.qq.com
            * .com 国际域名 
            * .cn 中文域名
            * .edu 教育
            * .gov 政府单位
            * .io 博客
            * .org 官方组织
            * .net 系统类
        * 请求资源名称 /login/index.html
            * 注意伪url地址的处理 为了增加seo 搜索引擎优化 动态网址不能被搜索引擎搜索到此时要把网站静态化
            * https://item.jd.hk/2688449.html => https://item.jd.hk/index.php?id=2688449  
        * 端口号 :80 浏览器默认加
            * 端口号的取值范围 0 - 65535
            * http 默认端口号 80
            * https 默认端口号 443
            * ftp 默认端口号 21
        * 问号传参 ?name=lzw&age=18
            * 用户想把信息传递给服务器，有很多方式
                * url地址问号传参数
                * 请求报文传输 请求头 和请求主体  
        * HASH值 #zs
            * 也可以充当信息传输的方式
            * 锚点定位
            * 基于HASH实现路由管控（不展示HASH，展示不同的组件和模块）
        **/

        // 给服务器通网后，会有两个ip
        // 内网ip和外网ip
        // 内网 局域网内部访问
        // 外网 外部用户通过外网访问

        // 基于js 实现页面跳转
        link.onclick = function() {
            // 获取当前页面url
            var url = window.location.herf;
            // 跳转页面
            // window.location.href = 'https://www.baidu.com'
            window.open('https://www.baidu.com/跳转')
            // https://www.baidu.com/%E8%B7%B3%E8%BD%AC
            console.log(decodeURI('https://www.baidu.com/%E8%B7%B3%E8%BD%AC'));
            // encodeURI()用于将URL转换为十六进制编码。
            // decodeURI()用于将编码的URL转换回正常URL。
        }

        // DNS解析和DNS预获取
        // DNS服务器域名解析
            // 前端优化 之 DNS缓存 DNS预获取
        // DNS 优化
            // DNS缓存 浏览器在第一次解析后 默认建立缓存 时间一分钟左右
            // 减少DNS解析次数 尽可能少的解析
            // dns-prefetch 在页面加载开始的时候 就把当前页面中需要访问其他域名的信息进行提前的dns解析

        // 三次握手（建立TCP连接）
            // 第一次握手 由浏览器发起 告诉服务器我要发送请求了 SYN=1 seq=j
            // 第二次握手 由服务器发起 告诉浏览器我准备接受了 可以发送 SYN=1 ACK=1 ack=j+1 seq=k
            // 第三次握手 由浏览器发起 告诉服务器 我马上发送 请等待接收 ACK=1 ack=K+1

        // HTTP报文
            // 请求报文：所有经过传输协议(一般值http)，客户端传送给服务器的内容，都被成为请求报文
                // 起始行
                // 请求头
                // 请求体
            // 响应报文：所有经过传输协议(一般值http)，服务器返回给客户端的内容，都被成为响应报文
                // 状态码
                // 响应头
                // 响应主体
            // HTTP报文：请求报文 + 响应报文
        
            // 1. 网站的前端后端都开发好了
            // 2. 购买服务器 阿里云 =>oss
            // 3. 服务器部署
            //     1> 把项目资源上传到服务器
            //     2> 构建web服务器 iis node nginx
                        // 指定项目目录
                        // 指定端口号
                        // 不要安装其他
                        // 指定默认页
                        // 创建了一个服务，后期客户端请求发送过来，由这个服务负责接收请求
                        // 找到相对应的资源文件，最后返回给客户端
                // 4.购买域名，并进行dns解析
                // 5.到工信部备案
            // HTTP 状态码
                // 200 成功并且发送
                // 204 成功 但是服务器没处理 无content 对于put 或者delete 服务器不愿意处理

        // 6.客户端渲染页面
            // 遇到 link/img/video 异步 开辟一个 新线程去请求资源 主线程继续渲染
            // 遇到 script/@import 同步 主线程加载信息 加载完成后继续渲染页面
                
            // 解析html生成一个dom tree dom树
            // 解析css生成css树
            // 讲dom树和css树结合生成渲染树render

        // 7. 四次挥手
            // 1.浏览器 => 服务器 发送给服务器 请求报文完了
            // 1.服务器 => 浏览器 发送给浏览器 接收请求报文完了
            // 1.浏览器 => 服务器 发送给服务器 响应报文完了
            // 1.服务器 => 浏览器 发送给浏览器 接受响应报文完了
    </script>
    <!-- // 三次握手（建立TCP连接） -->
    <img src="./data/Snipaste_2022-11-08_15-33-19.png" alt="">
    <!-- 浏览器渲染过程 -->
    <img src="./data/WX20221108-172951@2x.png" alt="">
</body>
</html>